<template>
    <YvRow>
        <YvRow :span="30" id="yv-game-list" :fhd="40" :hd="35" :sm="40" align="center">
            <YvCol class="yv-game-box" :span="7" :hd="10" :sm="30" v-for="item in resultData">
                <YvCard class="yv-game-card">
                    <YvCol class="yv-game-image" :span="36">
                        <img :src="item.icon" width="90%" height="70%" />
                    </YvCol>
                    <YvCol class="title" :span="40">
                        {{ item.title }}
                    </YvCol>
                    <YvCol class="tag" :span="40">
                        <YvCol v-if="item.useType!=1" :span="8" class="tag-obsulete">
                            弃用
                        </YvCol>
                        <YvCol :span="8" class="tag-in" v-for="tag in item.tag.split(',')">
                            {{ tag }}
                        </YvCol>
                    </YvCol>
                    <YvCol :span="30" class="yv-game-content">
                        {{ item.info }}
                    </YvCol>
                    <YvCol class="yv-btn-group">
                        <YvBtn @click.stop="goGame(item.keyword)">
                            进入游戏
                        </YvBtn>
                        <YvBtn @click.stop="goBack(item.keyword)" color="#FF0000" :reverse="true">
                            玩家后台
                        </YvBtn>
                    </YvCol>
                </YvCard>
            </YvCol>
        </YvRow>
    </YvRow>
</template>

<script>
import { get, post } from "@/js/request.js";
import pageMixins from "@/mixins/pageMixins.js";
export default {
    mixins: [pageMixins],
    name: "GameList",
    props: {
        num: {
            default: -1,
        }
    },
    data() {
        return {
            url: {
                list: '/anon/game/list'
            },
            gameArray: [
            ],
        }
    },
    created() {
        this.query.pageSize = this.num == -1 ? this.query.pageSize : this.num;
    },
    methods: {
        goGame(key) {
            this.$router.push(`/game/${key}`)
        },
        goBack(key) {
            this.$router.push(`/gameback/${key}`)
        },
    },
}
</script>

<style scoped>
#yv-game-list {
    margin: 10pt auto;
}

.yv-card {
    width: 100%;
}

.tag {
    margin: 1pt 0;
    height: 9pt;
}

.tag-obsulete {
    width: max-content;
    font-size: 8pt;
    margin: 0 1pt;
    border-radius: 2pt;
    border: 1px solid rgb(206, 0, 0);
    color: white;
    background: rgb(206, 0, 0, .49);
}

.tag-in {
    width: max-content;
    font-size: 8pt;
    margin: 0 1pt;
    border-radius: 2pt;
    border: 1px solid rgb(68, 169, 252);
    color: rgb(68, 169, 252);
    background: rgba(68, 169, 252, .14);
}

.title {
    font-size: 12pt;
    margin: -2pt 0;
}

.yv-game-content {
    height: 36pt;
}

.yv-game-content {
    font-size: 10pt;
    line-height: 12pt;
}



.yv-game-card {
    animation: identifierRe 0.3s;
    border-radius: 12pt;
    box-shadow: 0px 0px 4pt rgba( 68,169,252,.5);
}

.yv-game-card>* {
    margin-top: 4pt;
    margin-bottom: 4pt;
    overflow: hidden;
}


.yv-game-card:hover {
    /* 动画 */
    animation: identifier 0.3s;
    margin-top: -10pt;
}





@keyframes identifier {
    from {
        margin-top: 0pt;
    }

    to {
        margin-top: -10pt;
    }
}

@keyframes identifierRe {
    from {
        margin-top: -10pt;
    }

    to {
        margin-top: 0pt;
    }
}

.yv-game-box {
    margin-bottom: 14pt;
}

.yv-btn-group * {
    margin-left: 6pt;
    margin-right: 6pt;
    padding: 4pt 7pt;
}

.yv-game-image{
    text-align: center;
    height: 150pt;
    image-resolution: 1x;
    border-radius: 10pt;
}

.yv-game-image img {
    width: 100%;
    height: 150pt;
    transition: transform 0.5s ease-out;

}

.yv-game-image img:hover{
    /* 动画 */
    transform: scale(1.2); /* 鼠标移入时图片放大到1.2倍 */
}
</style>